<template>
    <li class="todo-item">
      <input type="checkbox" :checked="done" @change="handleChange" >
      <input type="text" v-if="isEditing" @blur="handleEdit" @keyup.enter="handleEdit" :value="content" v-focus>
      <!-- 动态样式class,如果done为true,就添加deleted样式 -->
      <span v-else @click="isEditing = true" :class="{deleted:done}">{{ content }}</span>
      <button @click="handleDelete">删除</button>
    </li>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
    id:{
        type:Number,//这里的id用date.now()生成的,为数值类型
        required:true,
    },
    content:{
        type:String,
        required:true,
    },
    done:{
        type:Boolean,
        required:true,
    }
})
const isEditing = ref(false)
//声明事件
const emit = defineEmits(['toggle','edit','delete'])
const handleChange = (event)=>{
    //发送数据
    emit('toggle',props.id,event.target.checked)
}
const handleEdit = (event)=>{
    //1.取消编辑状态
    isEditing.value=false
    //2.触发更新事件
    emit('edit',props.id,event.target.value.trim())
}
//实现自动聚焦效果
const vFocus = {
    //自定义指定,el表示当前的元素input
    mounted(el){
        el.focus()
    }
}
//删除数据
const handleDelete = ()=>{
    emit('delete',props.id)
}
</script>

<style scoped>
.todo-item{
      list-style: none;
    position: relative;
    padding-inline: 40px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.todo-item:hover{
    background-color: #ddd;
}
.todo-item span,
.todo-item input[type='text']{ /* 又是input,又是type=text的 */
    flex: 1;
    margin:  0 20px;
}
.todo-item button{
      padding-inline: 10px;
    outline: none;
}
.deleted{
    color: red;
    text-decoration: line-through;
}
</style>